import './home.less'
import { Col, Row, Card } from 'antd'
import ContentBox from './comp/contentBox'
import Charts from '../components/charts/charts'

function Home() {
  // 图表参数项
  const chartsOptions = [
    {
      color: ['#1e90ff'],
      xAxis: {
        show: false,
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      },
      yAxis: {
        show: false,
        type: 'value',
      },
      grid: {
        top: '5px',
        right: '15px',
        bottom: '10px',
        left: '15px',
      },
      series: [
        {
          data: [120, 45, 200, 150, 80, 70, 167, 222, 120, 190, 221, 45],
          type: 'bar',
        },
      ],
    },
    {
      color: ['#ff6b81'],
      xAxis: {
        show: false,
        type: 'category',
        boundaryGap: false,
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      },
      yAxis: {
        show: false,
        type: 'value',
      },
      grid: {
        top: '5px',
        right: '15px',
        bottom: '10px',
        left: '15px',
      },
      series: [
        {
          data: [934, 432, 258, 389, 1152, 820, 932, 432, 934, 1290, 589, 1320],
          type: 'line',
          areaStyle: {},
        },
      ],
    },
    {
      color: ['#80FFA5'],
      grid: {
        top: '5px',
        right: '15px',
        bottom: '10px',
        left: '15px',
      },
      xAxis: [
        {
          show: false,
          type: 'category',
          boundaryGap: false,
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
        },
      ],
      yAxis: [
        {
          show: false,
          type: 'value',
        },
      ],
      series: [
        {
          name: 'Line 1',
          type: 'line',
          stack: 'Total',
          smooth: true,
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
          },
          emphasis: {
            focus: 'series',
          },
          data: [140, 325, 101, 264, 424, 90, 340, 250, 390],
        },
      ],
    },
    {
      color: ['#ff7f50'],
      xAxis: {
        show: false,
      },
      yAxis: {
        show: false,
      },
      grid: {
        top: '5px',
        right: '15px',
        bottom: '10px',
        left: '15px',
      },
      series: [
        {
          symbolSize: 6,
          data: [
            [10.0, 8.04],
            [8.07, 6.95],
            [13.0, 7.58],
            [9.05, 8.81],
            [11.0, 8.33],
            [14.0, 7.66],
            [13.4, 6.81],
            [10.0, 6.33],
            [14.0, 8.96],
            [12.5, 6.82],
            [9.15, 7.2],
            [11.5, 7.2],
            [3.03, 4.23],
            [12.2, 7.83],
            [2.02, 4.47],
            [1.05, 3.33],
            [4.05, 4.96],
            [6.03, 7.24],
            [12.0, 6.26],
            [12.0, 8.84],
            [7.08, 5.82],
            [5.02, 5.68],
          ],
          type: 'scatter',
        },
      ],
    },
  ]
  // 内容配置项
  const contentOptions = [
    {
      title: '总销售额',
      count: '¥126,560',
      bottom: '日销售额 ￥12,423',
    },
    {
      title: '访问量',
      count: '8,846',
      bottom: '日访问量 1,234',
    },
    {
      title: '支付笔数',
      count: '6,560',
      bottom: '转化率 60%',
    },
    {
      title: '运营活动效果',
      count: '78%',
      bottom: '周同比 12%',
    },
  ]
  // 饼图配置项
  const pieOptions = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '5%',
      left: 'center',
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: '家用电器' },
          { value: 735, name: '食用酒水' },
          { value: 580, name: '个人健康' },
          { value: 484, name: '服饰箱包' },
          { value: 300, name: '母婴产品' },
        ],
      },
    ],
  }
  // 雷达图配置项
  const radarOptions = {
    legend: {
      data: ['人群分布'],
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: '小于10岁', max: 30000 },
        { name: '10-20岁', max: 30000 },
        { name: '20-30岁', max: 30000 },
        { name: '30-40岁', max: 30000 },
        { name: '40-50岁', max: 30000 },
        { name: '大于50岁', max: 30000 },
      ],
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: [8000, 10000, 29000, 20000, 19000, 11000],
            name: 'Allocated Budget',
          },
        ],
      },
    ],
  }
  return (
    <div>
      {/* 头部区域 */}
      <Row gutter={24}>
        {chartsOptions.map((item, index) => {
          return (
            <Col span={6}>
              <ContentBox
                chartOptions={item}
                contentOptions={contentOptions[index]}
                dom={`main-${index}`}></ContentBox>
            </Col>
          )
        })}
      </Row>
      <Row className="fill-box" gutter={24}>
        <Col span={12}>
          <Card title="销售额类别占比" className="card">
            <Charts options={pieOptions} dom="pie-dom"></Charts>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="用户访问人群" className="card">
            <Charts options={radarOptions} dom="radar-dom"></Charts>
          </Card>
        </Col>
      </Row>
    </div>
  )
}

export default Home
